<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
    <title>LikingFit鲁大店为您倾情打造</title>
    <link rel="Shortcut Icon" href="/images/liking.png"/>
    <!--<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=cbaec5d29d4bc79098e74433bc52cdb5"></script>-->
    <script src="https://webapi.amap.com/maps?v=1.3&amp;key=cbaec5d29d4bc79098e74433bc52cdb5&callback=init"></script>
    <link rel="stylesheet" href="/m/bootstrap/bootstrap.css">
    <script src="/common/jquery-3.1.1.min.js"></script>
    <script src="/m/bootstrap/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/m/css/common.css">
    <link rel="stylesheet" href="/m/css/layout.css">
    <script src="/m/js/common.js"></script>
    <script src="/m/js/layout.js"></script>
    <style type="text/css">
        .container{
            padding-left: 0px;
            padding-right: 0px;
            padding-top: 0px;
            position: relative;
        }
        #map_container{
            width: 100%;
            height: 400px;
        }
        .Infowindow-content{
        }
        .tag,.gym-tag{
            /*background-color: #34c86c;*/
            background-color: rgba(0, 0, 0, 0.7);
            color: #34c86c;
            width: auto;
            direction: ltr;
            white-space:nowrap;
            padding: 0 5px 0 5px;
            border-radius: 4px;
            font-size: 10px;
            /*border: 1px solid #398439;*/
            /*box-shadow: rgba(52, 200, 108, 0.51);*/
        }
        #panel {
            position: fixed;
            /*background-color: white;*/
            max-height: 50%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 60%;
            display: none;
        }
        .amap-info-content{
            background-color: rgba(0, 0, 0, 0.7);
            border: none;
            box-shadow: 0 3px 14px rgba(0,0,100,.3);
            padding: 8px;
        }
        .amap-info-outer:hover, .amap-menu-outer:hover {
            box-shadow: 0 3px 14px rgba(0,0,0,.3);
            /*box-shadow: none;*/
        }
        .amap-info-close {
            display: none;
        }
        .Infowindow-content{
            color: white;
            background-color: transparent;
            font-size: 12px;
        }
        .amap-info-body{
            margin-top: 5px;
        }

        .walkBtn,.driveBtn,.detailBtn{
            /*background-color: #34c86c;*/
            color: white;
            outline: none;
            border: none;
            display: block;
            border-radius: 4px;
            border: 1px solid #34c86c;
            background-color: transparent;
            padding: 2px 6px !important;
            margin-right: 0px;
            float: right;
        }
        .walkBtn{
            margin-left: 15px;
        }
        .driveBtn{
            margin-left: 15px;
        }
        .amap-call{
        }
        #search-bg{
            position: fixed;
            width: 100%;
            /*height: 40px;*/
            left: 0;
            top: 0;
            /*background-color: rgba(25, 51, 61, 0.31);*/
            background-color: rgba(255, 255, 255, 0.85);
            padding: 8px 0px;
            border-bottom: 1px solid gainsboro;
        }
        #search-bg input{
            display: block;
            height: 30px;
            width: 70%;
            margin: 0 auto;
            outline: none;
            border: none;
            border-radius: 6px;
            padding: 0 10px;
            background-color: #e9e9e9;
        }
        .list-bg{
            position: absolute;
            right: 15px;
            top: 10px;
            font-size: 18px;

        }
        .list-bg a{
            color: #34c86c;
        }
        .refresh-bg{
            position: absolute;
            left: 15px;
            top: 11px;
            font-size: 18px;
        }
        .refresh-bg a{
            color: #34c86c;
        }
        .amap-touch-toolbar .amap-zoomcontrol{
            bottom: -30px;
        }
        .amap-info-sharp{
            background-image: url("/images/trigon-down.png");
            background-repeat: no-repeat;
            width: 16px;
        }
        .search-filter{
            position: absolute;
            top: 46px;
            left: 0px;
            width: 100%;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
            display: none;
        }
        .search-filter ul{
            /*margin-top: 30px;*/
            list-style: none;
            width: 100%;
            /*height: 80px;*/
            margin-bottom: 0px;
            background-color: white;
            padding: 15px 0;
            /*border-bottom: 1px solid gainsboro;*/
            border-top: 1px solid gainsboro;
        }
        .search-filter ul li{
            float: left;
            width: 25%;
            text-align: center;
        }
        .search-filter ul li a{
            color: #34c86c;
            display: inline-block;
            width: 100%;
        }
        .search-filter-close{
            /*position: absolute;*/
            /*bottom: 0;*/
            /*left: 0;*/
            text-align: center;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 4px 0;
        }
        .search-filter-close a {
            color: white;
            font-size: 10px;
            display: block;
            width: 100%;
        }
        .search-filter-close a span{
            font-size: 10px;
        }
        #slideMask{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 47px;
            left: 0;
            background-color: black;
            opacity: .0;
            filter: alpha(opacity=0);
            display: none;
            z-index: 999;
        }
        #slide{
            width: 0;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.85);
            position: absolute;
            top: 47px;
            right: 0;
            display: none;
            z-index: 999;

        }
        /*#slide .right-ul{*/
            /*height: 400px;*/
            /*overflow: scroll;*/
        /*}*/
        #slide>div{
            padding-left:10px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        #slide>div.left-ul-bg{
            width: 30%;
        }
        #slide>div.right-ul-bg{
            width: 70%;
            border-left: #34c86c solid 1px;
            overflow: auto;
            height: 100%;
        }
        #slide ul{
            list-style: none;
            padding-left: 5px;
        }
        #slide ul li{
            border-bottom: #edeff3 solid 1px;
            padding: 5px 0;
        }
        .gym-tag{
            color: greenyellow;
            padding: 2px 2px;
            line-height: 13px;
        }
        .gym-tag>img{
            height: 13px;
            border-radius: 3px;
        }
        .gym-tag>span{
            font-size: 10px;
            padding-left: 3px;
        }
    </style>
    <script>
        var map
        var userLoc = new Coor(121.359265,37.523353)
        var cityCode = '0535'
        function init(){
            var gymCoor = [121.363306,37.514801]
            map = new AMap.Map('map_container', {
                center: gymCoor,
                zoom: 16
            });
            map.plugin(['AMap.ToolBar','AMap.InfoWindow','AMap.AdvancedInfoWindow'], function() {
                map.addControl(new AMap.ToolBar({
//                    offset: AMap.Pixel(10,30)
                }));
            });
            startLocating()
            requestData()
        }
        var createMarker = function(data,infoIsShow) {
            var div = document.createElement('div');
            div.className = 'tag';
            var span = document.createElement('span')
            span.innerHTML = data.title
            var coor = new Coor(data.coor[0], data.coor[1])
            div.appendChild(span)
            var marker = new AMap.Marker({
                content: div,
                title:data.title,
                position: data.coor,
                offset: new AMap.Pixel(0, -5),
            });
            marker.setMap(map)
            var infoWindowContent = "<div class='Infowindow-content'>" +
                    "<div class='amap-info-header'>"+data.title+"</div>" +
                    "<div class='amap-info-body'>" +
                    "<button class='walkBtn' onclick=walkToNavi(" + coor.lng + ","+coor.lat+")>步行</button>" +
                    "<button class='driveBtn' onclick=driveToNavi(" + coor.lng + ","+coor.lat+")>驾车</button></div></div>"
            var infowindow = new AMap.InfoWindow({
                isCustom: false,
                content: infoWindowContent,
                closeWhenClickMap: true,
            });
            AMap.event.addListener(marker, 'click', function () {
                infowindow.open(map, data.coor);
                showInfoWindow = infowindow
            });
            if (infoIsShow) {
                infowindow.open(map, data.coor);
                showInfoWindow = infowindow
            }
            return marker;
        }
        var showInfoWindow = null
        var createGymMarker = function(data, isShowWindow) {
            var div = document.createElement('div');
            div.className = 'gym-tag';
            var img = document.createElement('img')
            img.src = '/images/liking.png'
            div.appendChild(img)
            var span = document.createElement('span')
            span.innerHTML = data.title
            var coor = new Coor(data.coor[0], data.coor[1])
            div.appendChild(span)
            var marker = new AMap.Marker({
                content: div,
                title:data.title,
                position: data.coor,
                offset: new AMap.Pixel(-95, -5),
            });
            marker.setMap(map)
            var infoWindowContent = "<div class='Infowindow-content' onclick=toGym()>" +
                    "<div class='amap-info-header'>"+data.title+"</div>" +
                    "<div class='amap-info-body'>" +
                    "<button class='walkBtn' onclick=walkToNavi(" + coor.lng + ","+coor.lat+")>步行</button>" +
                    "<button class='driveBtn' onclick=driveToNavi(" + coor.lng + ","+coor.lat+")>驾车</button>" +
                    "<button class='detailBtn'>了解健身房</button>" +
                    "</div></div>"
            var infowindow = new AMap.InfoWindow({
                isCustom: false,
                content: infoWindowContent,
                closeWhenClickMap: true,
                offset: new AMap.Pixel(-20, 2)//-113, -140
            });
            AMap.event.addListener(marker, 'click', function () {
                infowindow.open(map, data.coor);
                showInfoWindow = infowindow
            });
            if (isShowWindow) {
                infowindow.open(map, data.coor);
                showInfoWindow = infowindow
            }
            return marker;
        }

        var searchMarker = null
        var createNormalMarker = function(data,infoIsShow) {

            var coor = new Coor(data.coor[0], data.coor[1])
            var marker = new AMap.Marker({
                title:data.title,
                position: data.coor,
            });
            marker.setMap(map)
            var infoWindowContent = "<div class='Infowindow-content'>" +
                    "<div class='amap-info-header'>"+data.title+"</div>" +
                    "<div class='amap-info-body'>" +
                    "<button class='walkBtn' onclick=walkToNavi(" + coor.lng + ","+coor.lat+")>步行</button>" +
                    "<button class='driveBtn' onclick=driveToNavi(" + coor.lng + ","+coor.lat+")>驾车</button></div></div>"
            var infowindow = new AMap.InfoWindow({
                isCustom: false,
                content: infoWindowContent,
                closeWhenClickMap: true,
                offset: new AMap.Pixel(-14, -20)//-113, -140
            });
            AMap.event.addListener(marker, 'click', function () {
                infowindow.open(map, data.coor);
                showInfoWindow = infowindow
            });
            if (infoIsShow) {
                infowindow.open(map, data.coor);
                showInfoWindow = infowindow
            }
            if (searchMarker != null) {
                searchMarker.hide()
            }
            searchMarker = marker
            return marker;
        }
        function Data(title,detail,coor)
        {
            this.title=title
            this.detail = detail
            this.coor=coor;
        }
        function Coor(lng,lat) {
            this.lng = lng
            this.lat = lat
        }
        //定位
        function startLocating() {
            //定位
            map.plugin('AMap.Geolocation', function () {
                geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                    maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                    convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                    buttonOffset: new AMap.Pixel(10, 80),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                    zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', function (e) {
                    userLoc = e.position
                    cityCode = e.cityCode
                });//返回定位信息
//                AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
            });
        }

        var mWalk = null
        function walkToNavi(lng, lat) {
            this.event.stopPropagation()
            if (mWalk == null) {
                AMap.service('AMap.Walking',function() {
                    mWalk = new AMap.Walking({
                        map: map,
                        panel: "panel"
                    })
                    mWalk.search([userLoc.lng,userLoc.lat], [lng,lat], function(status, result){
                        showInfoWindow.close()
                    })
                })
            }
//            [121.45267,31.186014]
            mWalk.search([userLoc.lng,userLoc.lat], [lng,lat], function(status, result){
                showInfoWindow.close()
            })
        }

        var mDrive = null
        function driveToNavi(lng, lat) {
            this.event.stopPropagation()
            if (mDrive == null) {
                AMap.service(["AMap.Driving"], function() {
                    mDrive = new AMap.Driving({
                        map: map,
                        panel: "panel"
                    });
                    mDrive.search([userLoc.lng,userLoc.lat], [lng,lat], function(status, result){
                        showInfoWindow.close()
                    })
                });
            }
//            [121.45267,31.186014]
            mDrive.search([userLoc.lng,userLoc.lat], [lng,lat], function(status, result){
                showInfoWindow.close()
            })
        }

        function toGym() {
            var url = "http://mp.weixin.qq.com/mp/homepage?__biz=MzIzMDU5Njk3Mw==&hid=3&sn=870d149ce1dd19bd08b96f666a9198c1#wechat_redirect"
            window.open(url,'_blank')
        }

        $(function () {
            $('#map_container').height(window.screen.availHeight)
            $('#slideMask,#slide').height(window.screen.availHeight-46)
            $('form').submit(function () {
                search()
            })

            $('input[type=search]').focus(function() {
                $('.search-filter').css('display','block')
            });
            $('input[type=search]').blur(function() {
//                $('.search-filter').css('display','none')
            });

            setSlideConfigure()

            //筛选
            $('#slide .left-ul-bg ul, #slide .right-ul-bg ul').bind("touchmove",function(event) {
                event.stopPropagation();
            })

        })

        function requestData() {
            //请求数据
            request('http://afantizz.com/likingfit/place-list',{},function (resp) {
                var type_ul = $("#slide .left-ul-bg ul")
                placeByTypesArr = resp
                for (var i=0; i<placeByTypesArr.length; i++) {
                    var placeByType = placeByTypesArr[i]
                    var li = $("<li onclick='changePlaceWithType("+placeByType.type_id+")'>"+placeByType.type_name+"<span class='glyphicon glyphicon-menu-right'></span></li>")
                    type_ul.append(li)

                    for (var j=0; j<placeByType.place.length; j++) {
                        var place = placeByType.place[j]
                        if (place.is_show) {
                            if (place.name.toLowerCase().indexOf('liking') > -1) {
                                createGymMarker(new Data(place.name,'',[place.lng,place.lat]))
                            } else {
                                createMarker(new Data(place.name,'',[place.lng,place.lat]),false)
                            }
                        }
                    }
                }
                changePlaceWithType(placeByTypesArr[0].type_id)
            })
        }

        var placeByTypesArr = new Array()

        var placeSearch = null
        var nearbySearch = null
        function search() {
            $('input[type=search]').blur()
            if (placeSearch == null) {
                AMap.service('AMap.PlaceSearch', function () {//回调函数
                    //分类查询
                    placeSearch = new AMap.PlaceSearch({
                        city: cityCode, //城市
//                        map: map,
                    });
                    handleSearch()
                })
            } else {
                handleSearch()
            }
        }
        function handleSearch() {
            var kw = $('input[type=search]').val()
            if (kw == null || kw == '') { return }
            var distance = 2000
            placeSearch.searchNearBy(kw, [userLoc.lng,userLoc.lat], distance, function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    var poi = result.poiList.pois[0]
                    map.setZoomAndCenter(16, [poi.location.lng,poi.location.lat]);
                    createNormalMarker(new Data(poi.name,'',[poi.location.lng,poi.location.lat]),true)
                } else {
                    showModel('未搜索到结果')
                }
            });
        }
        function nearbySearchByKeyword(kw) {
//
            var distance = 2000
            if (nearbySearch == null) {
                AMap.service('AMap.PlaceSearch', function () {//回调函数
                    //分类查询
                    nearbySearch = new AMap.PlaceSearch({
                        city: cityCode, //城市
                        map: map,
                    });
                    nearbySearch.searchNearBy(kw, [userLoc.lng,userLoc.lat], distance, function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                        } else {
                            showModel('未搜索到结果')
                        }
                    });
                })
            } else {
                nearbySearch.searchNearBy(kw, [userLoc.lng,userLoc.lat], distance, function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                    } else {
                        showModel('未搜索到结果')
                    }
                });
            }
        }
        function filterBoxClose() {
            $('.search-filter').css('display','none')
        }
        //排序的侧滑视图
        var slideIsAnimating = false
        function setSlideConfigure() {
            var sortBtn = $('#sortBtn')
            var slideMask = $('#slideMask')
            var slide = $('#slide')
//            slideMask.height($(document).height()-44-49)
//            slide.height($(document).height()-44-49)
            sortBtn.click(function () {
                if (slideIsAnimating) {return}
                var show = slideMask.css('display') == 'block'
                if (show) {
                    hideSlide()
                } else {
                    showSlide()
                }
            })
            slideMask.click(function () {
                hideSlide()
            })

            var sort = getParams('sort')
            if (sort == '' || sort == null) {
                sort = '最新'
            }

            $('.sortList li').each(function () {
                var that = $(this)
                if (that.text() == sort) {
                    that.addClass('selected')
                }
            })

            $('.sortList li').click(function () {
                $('.sortList li').removeClass('selected')
                $(this).addClass('selected')
                hideSlide()
                reload()
            })
        }

        function toggleSlide() {
            if (slideIsAnimating) {return}
            var show = $('#slideMask').css('display') == 'block'
            if (show) {
                hideSlide()
            } else {
                showSlide()
            }
        }

        function showSlide() {
            slideIsAnimating = true
            var slideMask = $('#slideMask')
            var slide = $('#slide')
            slideMask.css('display','block')
            slide.css('display','block')
            slide.animate({width:'70%'},200);
            slideMask.animate({
                'opacity': .3,
                'filter': 'alpha(opacity=30)'
            },200,function () {
                slideIsAnimating = false
            })
            $(document).bind('touchmove',function (event) {
                event.preventDefault()
            })
        }
        function hideSlide() {
            slideIsAnimating = true
            var slideMask = $('#slideMask')
            var slide = $('#slide')
            slide.animate({width:'0'},200);
            slideMask.animate({
                'opacity': .0,
                'filter': 'alpha(opacity=60)'
            },200,function () {
                slideMask.css('display','none')
                slide.css('display','none')
                slideIsAnimating = false
            })
            $(document).unbind('touchmove')
        }
        function changePlaceWithType(typeId) {
            var placeUl = $('#slide .right-ul-bg ul')
            placeUl.children('li').remove()
            for (var i=0; i<placeByTypesArr.length; i++) {
                var placeByType = placeByTypesArr[i]
                if (placeByType.type_id == typeId) {
                    var places = placeByType.place
                    for (var j=0; j<places.length; j++) {
                        var place = places[j]
                        var li = $("<li onclick='showPlaceInMap("+typeId+","+j+")'>"+place.name+"</li>")
                        placeUl.append(li)
                    }
                }
            }
        }
        function showPlaceInMap(typeId,placeIndex) {
            for (var i=0; i<placeByTypesArr.length; i++) {
                if (typeId != placeByTypesArr[i].type_id) { continue }
                var place = placeByTypesArr[i].place[placeIndex]
                var data = new Data(place.name,'',[place.lng,place.lat])
                if (place.name.toLowerCase().indexOf('liking')>-1) {
                    createGymMarker(data, true)
                } else {
                    createNormalMarker(data,true)
                }
                break
            }
            hideSlide()
        }
    </script>
</head>
<body>
  <div class="container">
      <div id="map_container">

      </div>
      <div id="panel"></div>
      <div id="search-bg">
          <form action="javascript:">
              <input type="search" placeholder="请输入关键字">
          </form>
          <div class="refresh-bg">
              <a href="javascript:location.reload()"><span class="glyphicon glyphicon-refresh"></span></a>
          </div>
          <div class="list-bg">
              <a href="javascript:toggleSlide()"><span class="glyphicon glyphicon-th-list"></span></a>
          </div>
      </div>
      <div class="search-filter">
          <ul class="clearfix">
              <li><a href="javascript:nearbySearchByKeyword('餐饮')">餐饮</a></li>
              <li><a href="javascript:nearbySearchByKeyword('购物')">购物</a></li>
              <li><a href="javascript:nearbySearchByKeyword('交通')">交通</a></li>
              <li><a href="javascript:nearbySearchByKeyword('健身')">健身</a></li>
          </ul>
          <div class="search-filter-close">
              <a href="javascript:filterBoxClose()"><span class="glyphicon glyphicon-menu-up"></span></a>
          </div>
      </div>
      <div id="slideMask"></div>
      <div id="slide">
          <div class="pull-left left-ul-bg">
              <ul>
                  <!--<li>院系<span class="glyphicon glyphicon-menu-right"></span></li>-->
                  <!--<li>宿舍<span class="glyphicon glyphicon-menu-right"></span></li>-->
                  <!--<li>食堂<span class="glyphicon glyphicon-menu-right"></span></li>-->
                  <!--<li>其他<span class="glyphicon glyphicon-menu-right"></span></li>-->
              </ul>
          </div>
          <div class="pull-left right-ul-bg">
              <ul>
                  <!--<li>北一</li>-->
                  <!--<li>北二</li>-->
                  <!--<li>北三</li>-->
                  <!--<li>北四</li>-->
              </ul>
          </div>
      </div>

  </div>
</body>
</html>